<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<link rel="icon" href="assets/images/logo/Shop.ico">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>博客详情</title>
    <link rel="shortcut icon" th:href="@{assets/images/Shop.ico}">
    <link rel="stylesheet" th:href="@{assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/style.min.css}">
    <style>
        .bbt {
            border: none;
        }
    </style>
</head>

<body>

<!-- Header Section Start -->

<!--//导航栏-->
<div th:replace="header::headerS"></div>
<!--引用结束-->
<!-- Header Section End -->


<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a href="index.html"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active"> 博客</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->

<!-- Blog Details Section Start -->
<div class="section section-margin">
    <div class="container">

        <div class="row">
            <!-- Blog Main Area Start -->


            <div class="col-lg-9 col-12">

                <!-- Single Post Details Start -->
                <div class="blog-details mb-10">

                    <!-- Blog Details Image Start -->
                    <h3 th:text="${details.name}"></h3><br>
                    <div class="image mb-6" data-aos="fade-up" data-aos-delay="300">
                        <img class="fit-image" th:src="${details.awardName}" alt="Blog">
                    </div>
                    <!-- Blog Details Image End -->

                    <!-- Single Post Details Content Start -->
                    <div class="content" data-aos="fade-up" data-aos-delay="300">

                        <!-- Title Start -->

                        <!-- Title End -->

                        <!-- Meta List Start -->
                        <div class="meta-list mb-3">
                            <span class="meta-item date"
                                  th:text="${#dates.format(details.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                            <span class="meta-item comment">浏览次数：<a href="#" th:text="${details.readCount}"></a></span>
                        </div>
                        <!-- Meta List End -->

                        <!-- Description Start -->
                        <div class="desc">
                            <p th:text="${details.content}"></p>

                            <!-- Blockquote Start -->
                            <blockquote class="blockquote mt-5 mb-5">
                                <p th:text="${details.attendType}" style="overflow: hidden"></p>
                            </blockquote>
                            <!-- Blockquote End -->

                            <p th:text="${details.content}" style="overflow: hidden"></p>
                        </div>
                        <!-- Description End -->

                    </div>
                    <!-- Single Post Details Content End -->

                    <!-- Single Post Details Footer Start -->
                    <div class="single-post-details-footer mt-10" data-aos="fade-up" data-aos-delay="300">
                        <!-- Shear Article Start -->
                        <div class="share-article">
                            <span class="left-side">
                                        <a th:href="@{/blog/oldTopic/}+${details.id}"> <i class="fa fa-long-arrow-left"></i>较旧的帖子</a>
                                    </span>
                            <h6 class="share-title text-uppercase">共享此文章</h6>
                            <span class="right-side">
                                        <a th:href="@{/blog/lastTopic/}+${details.id}">较新的帖子<i
                                                class="fa fa-long-arrow-right"></i></a>
                                    </span>
                        </div>
                        <!-- Shear Article Start -->
                        <h1 th:text="${message}"></h1>

                        <!-- Social Shear Start -->
                        <div class="widget-social border-top pt-2">
                            <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                            <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                            <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                            <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                            <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                        </div>
                        <!-- Social Shear Start -->
                    </div>
                    <!-- Single Post Details Footer End -->

                </div>
                <!-- Single Post Details End -->

                <!-- Comments Area Wrapper Start -->
                <div class="comment-area-wrapper mt-5" data-aos="fade-up" data-aos-delay="400">

                    <!-- Title Start -->
                    <h3 class="title mb-6"><span>共</span><span th:text="${count}" id="count"></span><span>条评论</span>
                    </h3>
                    <!-- Title End -->

                    <!-- Single Comment Wrapper Start -->
                    <div id="allBottons">
                        <div class="single-comment-wrap mb-6 bg-milky"
                             th:each="article : ${cmsTopicComments}"
                             th:id="buttons+${article.id}">
                            <a class="author-thumb" href=" ">
                                <img th:src="@{${article.memberIcon}}" alt="Author">
                            </a>
                            <div class="comments-info">
                                <a href="" class="name" style="display: inline-block;color:darksalmon;"><strong
                                        th:text="${article.memberNickName}"></strong>:
                                </a>
                                <p class="mb-1" th:text="${article.content}" style="display: inline-block"></p>
                                <div class="justify-content-between" id="buttons">
                                    <span class="author"
                                          th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:hh:ss')}"></span>
                                </div>
                                <div th:id="reply+${article.id}">
                                </div>
                                <div th:id="button+${article.id}">
                                    <button class="bnt btn-primary"
                                            th:onclick="'javascript:reply('+${article.id}+')'">
                                        展开回复 <i class="fa fa-angle-down"></i>
                                    </button>
                                    <button class="bnt btn-primary"
                                            th:onclick="'javascript:addToicAndTwo('+${article.id}+')'">回复
                                    </button>
                                </div>
                                <div th:id="addToicAndTwo+${article.id}" class="reply">
                                </div>
                            </div>
                        </div>

                        <!-- Single Comment Wrapper End -->

                        <div style="text-align: center" id="andOne">
                            <button onclick="addView()" class="bbt">
                                ------------------------点击查看更多------------------------
                            </button>
                        </div>
                    </div>
                    <!-- Single Comment Wrapper End -->


                </div>
                <!-- Comments Area Wrapper End -->

                <!-- Blog Comments Form Start -->
                <div class="blog-comment-form-wrapper mt-10" data-aos="fade-up" data-aos-delay="400">

                    <!-- Blog Comment Form Title Start -->
                    <div class="blog-comment-form-title">
                        <h2 class="title">评论</h2>
                    </div>
                    <!-- Blog Comment Form Title End -->

                    <!-- Comment Box Start -->
                    <div class="comment-box">
                        <div class="row">

                            <!-- Message Input Start -->
                            <div class="col-12 col-custom">
                                <div class="input-item mt-4 mb-4">
                                        <textarea cols="30" rows="5" name="comment"
                                                  class="rounded-0 w-100 custom-textarea input-area" placeholder="评论内容"
                                                  id="addtoic"></textarea>
                                </div>
                            </div>

                            <div class="col-12 col-custom mt-4">
                                <button class="btn btn-primary btn-hover-dark" onclick="addToic()">确认</button>
                            </div>
                            <!-- Submit Button End -->

                        </div>
                    </div>
                    <!-- Comment Box End -->
                </div>
                <!-- Blog Comments Form End -->

            </div>
            <!-- Blog Main Area End -->
            <!--引用右边-->
            <div class="col-lg-3 col-12" th:insert="~{rightBlogDetails :: rightPage}"></div>
            <!--引用右边结束-->
        </div>
    </div>
</div>
<!-- Blog Details Section End -->

<!-- Footer Section Start -->
<div th:insert="~{footer::footerS}"></div>
<!-- 底部结束 -->

<a href="#" class="scroll-top show" id="scroll-top">
    <i class="arrow-top pe-7s-angle-up-circle"></i>
    <i class="arrow-bottom pe-7s-angle-up-circle"></i>
</a>

<!-- 缩小移动菜单开始-->
<div th:insert="~{mobile-menu::menuWrapper}"></div>
<!--缩小移动菜单结束 -->
<!-- Scripts -->
<!-- Global Vendor, plugins JS -->

<!-- Vendor JS -->

<!--
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
-->


<!-- Plugins JS -->

<!--
<script src="assets/js/plugins/aos.min.js"></script>
<script src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>
<script src="assets/js/plugins/jquery-ui.min.js"></script>
<script src="assets/js/plugins/nice-select.min.js"></script>
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
<script src="assets/js/plugins/countdown.min.js"></script>
<script src="assets/js/plugins/lightgallery-all.min.js"></script>
-->


<!-- Use the minified version files listed below for better performance and remove the files listed above -->


<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{assets/js/main.js}"></script>
</body>
<script>
    let i = 0;
    let count = $("#count").text()
    let checkCount = 4
    showViews()

    function addView() {
        checkCount += 3
        if (checkCount > count) {
            checkCount = count
            var html = "<span>--------------------------别点啦 别点啦 已经不能给你再多啦~~~~~~---------------</span>"
            $("#andOne").html(html)
        }
        showViews()
    }

    function showViews() {
        var arr = []
        $("#allBottons").children().each(function () {
            var id = $(this).attr("id")
            if (id != 'undefind') {
                arr.push(id)
            }
        })
        for (let j = 0; j < count; j++) {
            if (j >= checkCount) {
                var button = arr[j]
                var button1 = "#" + button
                $(button1).hide()
            } else {
                var button = arr[j]
                var button1 = "#" + button
                $(button1).show()
            }
        }
    }

    function saveAddToicAndTwo(id) {
        var content = $("#addtoic1").val()
        $.ajax({
            type: "post",
            url: "blog/addToicAndTwo",
            data: {"content": content, "viewId": id},
            success: function (result) {
                location.reload()
            }
        })
    }

    function addToicAndTwo(id) {

        if (i == 0) {
            var path = "#addToicAndTwo" + id
            var html = ""
            html +=
                "<div class=\"col-12 col-custom\">\n" +
                "                                <div class=\"input-item mt-4 mb-4\">\n" +
                "                                        <textarea cols=\"30\" rows=\"5\" name=\"comment\"\n" +
                "                                                  class=\"rounded-0 w-100 custom-textarea input-area\" placeholder=\"回复内容\"\n" +
                "                                                  id=\"addtoic1\"></textarea>\n" +
                "                                    <button  onclick=\"saveAddToicAndTwo(" + id + ")\" class=\"bnt btn-primary\">确认</button>\n" +
                "                                </div>\n" +
                "                            </div>"
            $(path).append(html)
            i = 1;
        } else if (i == 1) {
            var path = "#addToicAndTwo" + id
            var html = ""
            html += ""
            $(path).html(html)
            i = 0;
        }

    }

    function reply(id) {
        var html = ""
        var path = "#reply" + id
        $.ajax({
            type: "post",
            url: "blog/checkToic",
            data: {"id": id},
            success: function (result) {
                var list = result
                for (let i = 0; i < list.length; i++) {
                    html += "<div class=\"single-comment-wrap mb-6 bg-milky\">\n" +
                        "                            <a class=\"author-thumb\" href=\"#\">\n" +
                        "                                <img src=\"" + list[i].memberIcon + "\" alt=\"Author\">\n" +
                        "                            </a>\n" +
                        "                            <div class=\"comments-info\">\n" + "<strong style='display: inline-block;color: darksalmon'>" + list[i].memberNickName + "</strong>:" +
                        "                                <p class=\"mb-1\" style='display: inline-block'>" + list[i].content + "</p>\n" +
                        "                                <div class=\"comment-footer d-flex justify-content-between\">\n" +
                        "                                    <span class=\"author\"><a href=\"\"></a> " +updateTime(list[i].createTime) + "\n</span>\n" +
                        "                                   \n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>"
                }
                $(path).append(html)
                var html1 = ""
                html1 +=
                    "<button class=\"bnt btn-primary\" onclick='returnView(" + id + ")' >\n" +
                    "                                收起\n" +
                    "                    <i class=\"fa fa-angle-up\"></i>         </button>\n" +
                    "                                <button class=\"bnt btn-primary\" onclick=\"addToicAndTwo(" + id + ")\">回复</button>"
                var path1 = "#button" + id
                $(path1).html(html1)
            }
        })

    }

    function updateTime(date) {
        var date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        var second = date.getSeconds();
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    }

    function returnView(id) {
        var path = "#button" + id
        var html =
            "<button class=\"bnt btn-primary\" onclick='reply(" + id + ")' >\n" +
            "                                展开回复\n" +
            "                     <i class=\"fa fa-angle-down\"></i>        </button>\n" +
            "                                <button class=\"bnt btn-primary\" onclick='addToicAndTwo(" + id + ")'>回复</button>\n"
        $(path).html(html)
        var path1 = "#reply" + id
        var html1 = ""
        $(path1).html(html1)
    }

    function addToic() {
        var content = $("#addtoic").val()
        $.ajax({
            type: "post",
            url: "blog/addToic",
            data: {"content": content},
            success: function (result) {
                console.info(result)
                location.reload()
            }
        })
    }

    function newTime(id) {
        $.get("CreateLookTime", {id}, function (result) {

        })
    }
</script>
</html>